<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:include="include :: header('新增活动成员')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
	<form class="form-horizontal m" id="form-member-add">
		<!-- 活动ID -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">活动ID：</label>
			<div class="col-sm-8">
				<input class="form-control" type="number" name="activityId" id="activityId" required>
				<span class="help-block m-b-none text-info">请输入有效的活动ID</span>
			</div>
		</div>

		<!-- 用户ID -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">用户ID：</label>
			<div class="col-sm-8">
				<input class="form-control" type="number" name="userId" id="userId" required>
				<span class="help-block m-b-none text-info">请输入有效的用户ID</span>
			</div>
		</div>

		<!-- 成员角色 -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">成员角色：</label>
			<div class="col-sm-8">
				<select name="role" id="role" class="form-control" required>
					<option value="">请选择</option>
					<option value="1">团长</option>
					<option value="2" selected>团员</option>
				</select>
			</div>
		</div>

		<!-- 报名状态（默认已报名） -->
		<div class="form-group">
			<label class="col-sm-3 control-label is-required">报名状态：</label>
			<div class="col-sm-8">
				<select name="joinStatus" id="joinStatus" class="form-control" required>
					<option value="0" selected>已报名</option>
<!--					<option value="1">已成团</option>-->
					<option value="2">已取消</option>
				</select>
				<span class="help-block m-b-none text-info">新成员默认状态为"已报名"</span>
			</div>
		</div>

		<!-- 创建时间（可选，后端可自动生成） -->
		<div class="form-group">
			<label class="col-sm-3 control-label">创建时间：</label>
			<div class="col-sm-8">
				<input class="form-control date" type="text" name="createTimeStr" id="createTimeStr"
					   placeholder="yyyy-MM-dd HH:mm">
				<span class="help-block m-b-none text-info">不填写将使用当前时间</span>
			</div>
		</div>

	</form>
</div>

<th:block th:include="include :: footer" />
<script type="text/javascript">
	var prefix = ctx + "system/member";

	layui.use(['laydate'], function () {
		var laydate = layui.laydate;
		laydate.render({
			elem: '#createTimeStr',
			type: 'datetime',
			format: 'yyyy-MM-dd HH:mm'
		});
	});

	$("#form-member-add").validate({
		onkeyup: false,
		rules: {
			activityId: { required: true, digits: true, min: 1 },
			userId: { required: true, digits: true, min: 1 },
			role: { required: true },
			joinStatus: { required: true }
		},
		messages: {},
		focusCleanup: true
	});

	function submitHandler() {
		if ($.validate.form()) {
			// 如果填写了创建时间，则转换为时间戳
			if ($("#createTimeStr").val()) {
				var time = new Date($("#createTimeStr").val()).getTime() / 1000;
				$("<input>").attr({
					type: "hidden",
					name: "createTime",
					value: time
				}).appendTo("#form-member-add");
			}

			// 特殊处理：如果初始状态不是已报名，给出提示
			var joinStatus = parseInt($("#joinStatus").val());
			if (joinStatus !== 0) {
				$.modal.confirm("确定要将新成员状态设置为" +
						(joinStatus === 1 ? "已成团" : "已取消") + "吗？", function() {
					$.operate.save(prefix + "/add", $('#form-member-add').serialize());
				});
			} else {
				$.operate.save(prefix + "/add", $('#form-member-add').serialize());
			}
		}
	}
</script>
</body>
</html>
